/**
 * Created by sunny on 23/03/2017.
 */
/**
 * Created by sunny on 21/03/2017.
 */
/**
 * Created by sunny on 21/03/2017.
 */


import React, { Component } from 'react';

import FoodState from './foodstate'

import {observer} from 'mobx-react';

import Diancanitem from '../components/Diancanitem.js'

import Change from '../components/change'

import Shopcart from '../components/shopcart'

import Rightlist from '../components/rightlist'

import Leftlist from '../components/leftlist'

import Specif from '../components/specif'

import { observable,computed,autorun,action,useStrict } from 'mobx';

import {
  StyleSheet,
  View,
  Text,
  TouchableNativeFeedback,
  Dimensions,
  TouchableHighlight,
  Image,
  FlatList,
  ActivityIndicator,
} from 'react-native';

const store = new FoodState();




const { width, height } = Dimensions.get('window');
import data from '../testdata/order.json'

const leftwidth=width/5
const rightwidth=width*4/5
const imgwidth=width*4/25
const rightwidth1=width*16/25


var styles=StyleSheet.create({
  add:{
        width:25,
        padding:10,
        height:25
    },
    decrease:{
        width:25,
        padding:10,
        height:25
    },
    touch:{
        borderRadius:30,
        backgroundColor:'#1296db'
    },
    num:{
        paddingLeft:10,
        paddingRight:10
    },
    changewarp:{
        width:100,
        padding:10,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    },
   icon:{
     width:30,
     height:30
   },
   warp:{
     flexDirection:'row',
     justifyContent:'space-between'
   },
   left:{
     width:leftwidth,
   },
   right:{
     width:rightwidth
   },
   single:{
        width:'100%',
    },
   righttypes:{
     width:'100%',
     height:50
   },
   types1:{
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        height:imgwidth+30
    },
    singleimg:{
        width:imgwidth,
        paddingTop:'20%',
    },
    singleright:{
        width:rightwidth1,
        height:imgwidth+20,
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'space-around',
    },
    chosetype:{
        backgroundColor:'#1296db',
        color:'white',
        borderRadius:10,
        padding:3
    },
    single:{
        width:'100%',
    },
    changewarp:{
      width:'100%',
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center'
    },
    alert:{
      width:rightwidth,
      height:200,
      position:'absolute',
      left:leftwidth/2,
      top:20,
      backgroundColor:'black'
    },
    shopcart:{
      position:'absolute',
      width:rightwidth,
      height:50,
      left:leftwidth/2,
      bottom:10,
      backgroundColor:'#3a3635',
      borderRadius:20,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center'
    },
    shopleftwarp:{
      width:48,
      height:48,
    },
    shopleftimg:{
      width:48,
      height:48,
    },
    shoplefttext:{
      position:'absolute',
      borderRadius:10,
      padding:2,
      fontSize:10,
      color:'white',
      backgroundColor:'#ff2d4b',
      color:'white',
      borderWidth:2,
      borderColor:'#ff2d4b',
      right:-3,
      top:-3
    },
    shopmiddlewarp:{
      width:(rightwidth-50)/2,
      height:50,
      padding:4
    },
    shopmiddletext1:{
      width:'100%',
      color:'white',
      height:"50%",
      fontSize:10,
      lineHeight:15,
      textAlign:'left',
      paddingLeft:15
    },
    shopmiddletext2:{
      width:'100%',
      color:'#808080',
      height:"50%",
      fontSize:8,
      lineHeight:11,
      textAlign:'left',
      paddingLeft:15
    },
    shoprightwarp:{
      width:(rightwidth-50)/2,
      height:50,
      padding:4,
      borderTopRightRadius:20,
      borderBottomRightRadius:20,
      backgroundColor:'#ff2d4b'
    },
    shoprighttext:{
      textAlign:'center',
      lineHeight:29,
      color:'white'
    },
   typetext:{
     textAlign:'center',
   },
   types:{
     width:'100%',
     height:70,
     flexDirection:'column',
     borderRadius:5,
     justifyContent:'center',
     backgroundColor:'white'
   },
   types1:{
     width:'100%',
     height:70,
     backgroundColor:'#1296db',
     borderRadius:5,
     flexDirection:'column',
     justifyContent:'center',
   },
   typetext:{
     textAlign:'center',
   },
})


@observer
export default class Cinemas extends Component {
  static navigationOptions = {
    title: '代客下单',
    headerTitleStyle: {
      alignSelf:'center'
    },
    headerStyle:{
        height:45
      },
      tabBarLabel: '代客下单',
    tabBarPosition:'bottom',
    tabBarIcon: () => (
      <Image
        source={require('../img/editor.png')}
        style={styles.icon}
      />
    )
  };




  state={
    specifdata:{
				"id": "6f060032afe042c7bfd0a67361ac3b1d",
				"typeid": "65e4434f6a3b481f94ed84e083256a17",
				"listName": "好吃",
				"num": 0,
				"src": "/houtai/userfiles/a9c96f956fd1499a9d5c4625c2905e5a/images/seller/foodManage/1506064233511.jpg",
				"orprice": 1,
				"price": 1,
				"listin": [
					{
						"id": "9b1998e82dd84b6091e5e3e53dc28cc4",
						"index":"1a0b0",
						"isNewRecord": false,
						"foodid": "6f060032afe042c7bfd0a67361ac3b1d",
						"foodspecsid": "2b55d2dcf3dd47f29a081302c60dec99",
						"price": 1,
						"nowprice": 1,
						"fooddescriotion": "",
						"listName": "两",
						"num": 0,
						"foodname": "好吃"
					}
				]
			},
    types:[
            {
              name:'热菜'
            },
            {
              name:'凉菜'
            },
            {
              name:'荤菜'
            },
            {
              name:'素菜'
            },
            {
              name:'热菜'
            },
            {
              name:'凉菜'
            },
            {
              name:'荤菜'
            },
            {
              name:'素菜'
            },
            {
              name:'热菜'
            },
            {
              name:'凉菜'
            },
            {
              name:'荤菜'
            },
            {
              name:'素菜'
            },
            {
              name:'香菜'
            }
          ]
  } 
  componentWillMount(){
    this.loading()
  }
  shouldComponentUpdate(){
    return false
  }
 
  getallfood=async function(){
        try {
            let response = await fetch(global.mainurl+"bossHelper/getAllFoods?sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token);
            var data=await response.json()
            console.log(data)
            console.log(12)
            if(data.code==1){
                       return data.data
                    }
            else{
								
						}
            } 
    catch(error) {
      console.log(error)
            ToastAndroid.show('网络出错', ToastAndroid.SHORT);
            }
    }

    getallfoodtype=async function(){
        
        try {
            let response = await fetch(global.mainurl+"bossHelper/getFoodType?sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token);
            var data=await response.json()
            console.log(data)
            if(data.code==1){
                global.foodtype=data.data
                var order_foodtype = new Array()
						for (var i = 0; i < data.data.length; i++) {
							order_foodtype.push({
								index : i,
								name : data.data[i].name,
								num : 0,
								id : data.data[i].id,
								list : []
							})
						}
                        return order_foodtype
            }
            else{
								
						}
            } 
    catch(error) {
      console.log(error)
            ToastAndroid.show('网络出错', ToastAndroid.SHORT);
            }
    }

        loading=async function(){
                        var type= await this.getallfoodtype()
                    var food= await this.getallfood()
                    var order_allfoods = new Array()
                            for (var i = 0; i < food.length; i++) {
                                        if(food[i].foodInfoList){
                                        for(var z=0;z<food[i].foodInfoList.length;z++){
                                            food[i].foodInfoList[z].num=0;
                                            food[i].foodInfoList[z].src=food[i].foodimage1;
                                            food[i].foodInfoList[z].foodname=food[i].foodname;
                                        }
                                        order_allfoods.push({
                                            id : food[i].id,
                                            typeid : food[i].foodtype.id,
                                            listName : food[i].foodname,
                                            flag:food[i].soldflag,
                                            num : 0,
                                            name:'',
                                            src : food[i].foodimage1,
                                            orprice : food[i].foodInfoList[0].price,
                                            price : food[i].foodInfoList[0].nowprice,
                                            listin:food[i].foodInfoList
                                        })
                                        }
                                        else{
                                            order_allfoods.push({
                                            id : food[i].id,
                                            typeid : food[i].foodtype.id,
                                            listName : food[i].foodname,
                                            flag:food[i].soldflag,
                                            num : 0,
                                            name:'',
                                            src : food[i].foodimage1,
                                            orprice : 0,
                                            price : 0,
                                            listin:[]
                                        })
                                        }
                                    }
                    for (var i = 0; i <type.length ; i++) {
                        for (var j = 0; j < order_allfoods.length; j++) {
                            if (order_allfoods[j].typeid == type[i].id) {
                                type[i].list.push(order_allfoods[j])
                                order_allfoods[j].listin.forEach(data=>{
                                  data.index1=i;
                                  data.index2=j;
                                })
                            }
                        }
                    }
                    store.getdata(type)
        }
  

  
  changenum=(item,flag)=>{
   
    if(flag){
      this.state.types[1].list[1].listin[0].num=this.state.types[1].list[1].listin[0].num+1
      aa=this.state.types
    }
    else{
      this.state.types[a].list[b].listin[c].num--
    }
    this.setState({
      types:aa
    })
  }


  showspecif1=(data)=>{
    this.setState({
      showspecif:true
    })
    alert(this.state.showspecif)
    console.log("56")
  }

  chosedfood=()=>{
    let chosedfood=[]
    store.alldata.forEach(function(list){
      list.list.forEach(function(list){
        list.listin.forEach(function(listin){
          if(listin.num>0){
            
          chosedfood.push(listin)
        }
        })
      })
    })
    return chosedfood
  }
  render() {
    let { types} = this.state;
    return (
      <View style={{flex:1}}>
      <View style={styles.warp}>
      <FlatList
      ref={(flatList)=>this.leftflatList = flatList}
      style={styles.left}
      numColumns={1}
      ListFooterComponent={()=>{
        return(
          <View style={{height:70}}>
          </View>
        )
      }}
      showsVerticalScrollIndicator={false}
      keyExtractor={(item, index) => index}
      data={store.list}
      extraData={store.leftindex}
      renderItem={(item) => {
                return (
                <TouchableHighlight
                  activeOpacity={0.5}
                  underlayColor={'red'}
                   style={store.leftindex==item.index?styles.types1:styles.types}
                   onPress={()=>{
                     store.makeleftchose(item.index)
                     this.rightflatList.scrollToIndex({viewPosition: 0, index: item.index})
                   }}
                   >
                  <Text style={styles.typetext}>
                  {item.item.name}
                  </Text>
                  </TouchableHighlight>
                )
              }
              }
      />
      <FlatList
      ref={(flatList)=>this.rightflatList = flatList}
      style={styles.right}
      numColumns={1}
      ListFooterComponent={()=>{
        return(
          <View style={{height:70}}>
          </View>
        )
      }}
      keyExtractor={(item, index3) => index3}
      data={store.list}
      onViewableItemsChanged={(data)=>{
        this.leftflatList.scrollToIndex({viewPosition: 0.2, index:data.viewableItems[0].index})
        store.makeleftchose(data.viewableItems[0].index)
      }}
      renderItem={ 
               (item1) =>{
                 return(
                   <View>
                   <Text style={{paddingLeft:10}} >{item1.item.name}</Text>
                   <Rightlist showspecif={(data)=>{store.showspecif1(data)}} changeinid={store.changeinid} changedid={store.changedid} data={item1}/>
                   </View>
                 )
            
  }
               
              }
      />
      </View>
      <Shopcart navigation={this.props.navigation} changeid={(pro1,pro2)=>{store.makesure(pro1,pro2)}} chosed={store.chosedfood} totalPrice={store.totalPrice}></Shopcart>
      {
        store.showspecif
        ?
        <Specif close={()=>{store.close()}} data={store.showspecif}/>
        :
        <Text></Text>
      }
      </View>
    );
  }
}
